<div class="logins">
  <form class="form" dForm ngForm [dValidateRules]="formRules.rule" [layout]="layoutDirection"
    #userForm="dValidateRules" (dSubmit)="submitForm($event)">
    <d-form-item>
      <d-form-control>
        <input dTextInput name="username" minlength="3" autocomplete="off" placeholder="请输入用户名/手机号"
          [(ngModel)]="formData.userName" [dValidateRules]="formRules.usernameRules"
          [ngModelOptions]="{ updateOn: 'blur' }" #nameValid="ngModel" (focus)="initial()" />
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-control [suffixTemplate]="suffixTemplate">
        <input dTextInput name="password" [(ngModel)]="formData.password" minlength="8" maxlength="32"
          [type]="showPassword ? 'text' : 'password'" placeholder="请输入密码（8-32个数字字母特殊字符组合）"
          [dValidateRules]="formRules.passwordRules" [ngModelOptions]="{ updateOn: 'blur' }" #passwordValid="ngModel"
          (focus)="initial()" />
      </d-form-control>
      <ng-template #suffixTemplate>
        <i [class]="
            showPassword ? 'icon icon-preview' : 'icon icon-preview-forbidden'
          " (click)="showPassword = !showPassword"></i>
      </ng-template>
    </d-form-item>
    <div class="wrongMsg" *ngIf="wrongM && nameValid.valid && passwordValid.valid">{{ wrongMsg }}</div>
    <d-form-operation class="login-operation">
      <d-button class="login-btn" [title]="userForm.errorMessage || ''" circled="true" dFormSubmit>登录</d-button>
    </d-form-operation>
  </form>
  <div>
    <div class="register">
      <a (click)="closeDialog()">注册</a>
    </div>
  </div>
</div>
